<template>
    <section id="system-user-manager">
        <el-col :span="24"  style="padding-bottom: 0px;">
            <el-form :inline="true" :model="filters" size="small">
                <el-form-item>
                    <el-input v-model="filters.ip" placeholder="请输入查询账号"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" >查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="dialogAddUserVisible = true">新增</el-button>
                </el-form-item>
            </el-form>
        </el-col>

        <el-dialog title="新增用户" :visible.sync="dialogAddUserVisible" @open="openDialog">
            <el-form :model="addUserForm">
                <el-form-item label="账号" :label-width="formLabelWidth">
                    <el-input v-model="addUserForm.account" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="用户名" :label-width="formLabelWidth">
                    <el-input v-model="addUserForm.username" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码" :label-width="formLabelWidth">
                    <el-input v-model="addUserForm.password"  show-password></el-input>
                </el-form-item>
                <el-form-item label="邮箱" :label-width="formLabelWidth">
                    <el-input v-model="addUserForm.email" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="项目组" :label-width="formLabelWidth">
                    <el-input v-model="addUserForm.department" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="角色" :label-width="formLabelWidth">
                    <el-select v-model="addUserForm.role" placeholder="请选择活动区域">
                        <el-option label="运维" value="运维"></el-option>
                        <el-option label="开发" value="开发"></el-option>
                        <el-option label="测试" value="测试"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogAddUserVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleAddUserConfirm">确 定</el-button>
            </div>
        </el-dialog>


        <el-table
                highlight-current-row
                :data="userList"
                style="width: 100%"


        >
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    sortable
                    prop="account"
                    label="账号"
                    width="100">
            </el-table-column>

            <el-table-column
                    sortable
                    prop="username"
                    label="姓名"
                    width="130">
            </el-table-column>
            <el-table-column
                    prop="email"
                    label="邮箱"
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="department"
                    label="项目组"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="role"
                    label="角色"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="last_login_time"
                    label="最后登录时间"
                    width="180">
            </el-table-column>
            <el-table-column
                    label="操作"
                    width="300">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="info" size="small">编辑</el-button>
                    <el-button @click="handleResetPassword(scope.row)" type="warning" size="small">密码重置</el-button>
                    <el-button @click="handleDeleteUser(scope.row)" type="danger" size="small">删除</el-button>

                    <el-dialog :title=titleResetpassword :visible.sync="resetPassword">
                        <el-form :model="resetPassForm">
                            <el-form-item label="设置密码" :label-width="formLabelWidth">
                                <el-input type="password" placeholder="请输入6~15位密码" v-model.lazy="passwordModel"/>
                                <span>{{passwordValidate.errorText}}</span>
                            </el-form-item>
                            <el-form-item label="确认密码" :label-width="formLabelWidth">
                                <el-input type="password" placeholder="请再输入一遍密码"  v-model.lazy="passwordcheckModel" />
                                <span>{{passwordCheckValidate.errorText}}</span>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="resetPassword = false">取 消</el-button>
                            <el-button type="primary" @click="handleResetPasswordConfirm" :disabled="buttonReset">确 定</el-button>
                        </div>
                    </el-dialog>



                </template>
            </el-table-column>
        </el-table>

    </section>
</template>

<script>
    import { getHulkUsers,deleteUser,resetPass,addUser } from '../../api/api'

    export default {
        data() {
            return {
                filters: {
                    ip: ''
                },
                userList: [],
                resetPassword: false,
                resetPassForm: {
                    newPassword: '',
                    newPasswordConfirm: '',
                },
                addUserForm: {
                    account: '',
                    username: '',
                    password: '',
                    email: '',
                    department: '',
                    role: '',
                },
                titleResetpassword: "",
                accountResetpassword: "",
                formLabelWidth: '80px',
                passwordModel: "",
                passwordcheckModel: "",
                buttonReset: true,
                dialogAddUserVisible: false,

            }
        },
        methods: {
            getUsers(){
                getHulkUsers().then((res) => {
                    console.log(res.data.users)
                    this.userList = res.data.users
                    }
                )
            },
            handleDeleteUser(row) {
                //alert(row.account)
                var accountParam = {account: row.account}
                deleteUser(accountParam)  //TODO: 如何获得较好的删除体验
                //this.getUsers();
                this.$router.go(0)

            },
            handleResetPassword(row) {
                this.resetPassword = true
                //alert(row.account)
                this.titleResetpassword = row.username
                this.accountResetpassword = row.account

            },
            handleResetPasswordConfirm() {
                //alert(row.account)
                //this.titleResetpassword = row.username
                console.log(this.accountResetpassword)
                if(this.passwordcheckModel ===this.passwordModel ){
                    console.log("begin to reset password")
                    var params = {account: this.accountResetpassword,password: this.passwordcheckModel}
                    resetPass(params)
                }
                this.resetPassword = false
            },
            handleAddUserConfirm() {
                //alert(row.account)
                //this.titleResetpassword = row.username

                console.log(this.addUserForm)
                addUser(this.addUserForm)
                this.userList.push(this.addUserForm)


                this.dialogAddUserVisible = false


            },
            openDialog() {
                console.log("关闭 Dialog")
                this.addUserForm.account = ""
                this.addUserForm.username = ""
                this.addUserForm.password = ""
                this.addUserForm.email = ""
                this.addUserForm.department = ""
                this.addUserForm.role = ""
            }
        },
        computed: {
            passwordValidate: function() {
                var errorText;
                if(!/^[0-9A-Za-z]{6,15}$/.test(this.passwordModel)) {
                    errorText = '密码少于6位'
                } else {
                    errorText = ''
                }
                if(!this.passwordFlag) {
                    errorText = ''
                    this.passwordFlag = true
                }
                return {
                    errorText
                }
            },
            passwordCheckValidate: function() {
                var errorText;
                if(this.passwordcheckModel !==this.passwordModel ){
                    errorText = '两次密码不匹配'
                }
                else {
                    errorText = ''
                    this.buttonReset = false  //验证密码
                }

                if(!this.passwordFlag) {
                    errorText = ''
                    this.passwordFlag = true
                }
                return {
                    errorText
                }
            }

        },
        mounted() {
            this.getUsers();
        },




    }
</script>